<template>
  <div>
    <eagle-dialog-page
      :params="paramArr"
      @initList="bindData"
      @onOpen="open"
      @submit="submit"
      @callbackDialog="callbackDialog"
      @setData="setData"
      @initActive="initActive"
      v-bind="$attrs"
      v-on="$listeners"
      ref="eagleDialogPage"
      :tab="true"
      :isPage="true"
      :isMulti="multi"
      :option="option"
    >
      <div style="display:flex" v-for="dataItem in list" :key="dataItem.AreaCode">
        <div style="flex:0.9">
          <eagle-cell
            :title="dataItem.AreaName"
            :label="dataItem.Remarks || '暂无描述'"
            @click="cellClick(dataItem)"
          >
            <!-- <template #right-icon
              >
              <eagle-checkbox v-if="multi" :name="dataItem.AreaCode" shape="round"
            /><eagle-radio v-if="!multi" @click="radioClick(dataItem)" :name="dataItem.AreaCode" shape="round"
            /></template> -->
          </eagle-cell>
        </div>
        <div style="display:flex;flex:0.1;align-items: center;justify-content: center;text-align: justify;">
          <eagle-checkbox v-if="multi" :name="dataItem.AreaCode" shape="round"/>
          <eagle-radio v-if="!multi" @click="radioClick(dataItem)" :name="dataItem.AreaCode" shape="round"/>
        </div>
      </div>

      <template #seletedSlot>
        <eagle-cell
          name="seletedSlot"
          v-for="(item, index) in multiselectedlist"
          :key="index"
        >
          <div class="risk_item_buton">
            <div class="mb-5">
              <div class="mb-5">{{ item.AreaName }}</div>
              <div>
                {{ item.AreaName }}
              </div>
            </div>
            <van-icon name="delete" @click="deleteSelect(item.AreaCode)" />
          </div>
        </eagle-cell>
      </template>
    </eagle-dialog-page>
  </div>
</template>
<script>
import { deepClone } from "@/utils";
import store from "@/store/index";
export default {
  props: {
    confirmButton: {
      type: String,
      default: "完成",
    },
    tagData: {
      type: Array,
      default: () => [],
    },
    multi: {
      type: Boolean,
      default: () => true,
    },
    onlyRiskUnit: {
      type: Boolean,
      default: () => false,
    },
    selectedValue: {
      type: String,
      default: () => "",
    },
  },
  data() {
    return {
      dangerAreaCustomType: "",
      paramArr: [],
      multiselectedlist: this.tagData,
      selecteData: [],
      option: { name: "AreaName", code: "AreaCode" },
      list: [],
      active:0,
      isOpen:false,
    };
  },
  created() {
    // for (let i = 0; i < this.params.length; i++) {
    //   this.localParams.push(
    //     Object.assign(
    //       { page: 0, limit: 10, badge: false, cnt: "",moreSearch:false },
    //       this.params[i]
    //     )
    //   );
    // }
  },
  mounted() {
    this.title = this.title || "选择隐患区域";
    this.getOptions();
  },
  methods: {
    loadParams() {
      this.paramArr = [];
      if (this.dangerAreaCustomType.indexOf("A") >= 0) {
        this.paramArr.push({
          url: "/RiskUnit/GetPageData",
          title: "检查点[风险位置]",
          Name: "Keywords",
          dataType: "DangerHiddenArea",
          page: -1,
          limit: 20,
        });
      } else if (
        this.dangerAreaCustomType.indexOf("B") >= 0 &&
        !this.onlyRiskUnit
      ) {
        this.paramArr.push({
          url: "/RiskUnitArea/GetPageData",
          title: "检查点[风险区域]",
          Name: "Keywords",
          dataType: "DangerHiddenArea",
          page: -1,
          limit: 20,
        });
      }
      if (
        this.dangerAreaCustomType.indexOf("C") >= 0 &&
        store.state.hasRiskControl &&
        !store.state.isFW &&
        !store.state.IsJGB
      ) {
        this.paramArr.push({
          url: "/RiskPoint/GetPageData",
          title: "检查点[风险点]",
          Name: "Keywords",
          dataType: "DangerHiddenArea",
          page: -1,
          limit: 20,
        });
      }
      if (this.dangerAreaCustomType.indexOf("D") >= 0) {
        this.paramArr.push({
          url: "/UserOrg/GetPageData",
          title: "检查点[部门/班组]",
          Name: "Keywords",
          dataType: "DangerHiddenArea",
          page: -1,
          limit: 20,
        });
      }
      if (
        this.dangerAreaCustomType.indexOf("D") >= 0 &&
        store.state.hasEquCatalog &&
        !store.state.isFW &&
        !store.state.IsJGB
      ) {
        this.paramArr.push({
          url: "/EquEquipment/GetPageData",
          title: "检查点[设施设备]",
          Name: "Keywords",
          dataType: "DangerHiddenArea",
          page: -1,
          limit: 20,
        });
      }
      if (store.state.hasLesseeCatalog) {
        this.paramArr.push({
          url: "/RentalPlace/GetPageData",
          title: "检查点[出租场所]",
          Name: "Keywords",
          dataType: "DangerHiddenArea",
          page: -1,
          limit: 20,
        });
      }
    },
    async getOptions() {
      var res = await this.$axios.get("/ParamOption/GetOptionKeyValue", {
        params: { key: "DangerAreaCustomType" },
      });
      this.dangerAreaCustomType = res.data || "";
      this.loadParams();
    },
    initActive(active){
      this.active = active;
    },
    bindData(list) {
      this.list = list;
      var newData = [];
      if (this.multi) {
        if(this.isOpen){
          this.multiselectedlist = this.tagData;
        }
        this.$refs.eagleDialogPage.initSeletedData(this.multiselectedlist);
      } else {
        newData = [{ code: this.selectedValue, AreaCode: this.selectedValue }];
        this.$refs.eagleDialogPage.initSeletedData(newData);
      }
      this.isOpen = false;
    },
    open() {
      this.isOpen=true;
      //this.listUser = list;
    },
    submit() {
      this.$refs.eagleDialogPage.submit();
    },
    setData(data) {
      if (this.multi) {
        this.multiselectedlist = data;
      } else {
        this.simSelectObject = data;
      }
    },
    callbackDialog(data,fullData) {
      
      if (!data || data.length == 0) {
        this.$toast("您还未选择区域");
        return false;
      }
      if (this.multi) {
        //处理数据与pc保持一致
        let resultArr = [];
        resultArr = deepClone(this.multiselectedlist);
        if (resultArr && resultArr.length > 0) {
          for (var i = 0; i < resultArr.length; i++) {
            let item = resultArr[i];
            item.CheckArea = item.AreaName;
            item.CheckAreaCode = item.AreaCode;
            item.CheckAreaType = item.AreaType;
            item.CheckObjectsType = "2";
          }
        }
        this.$emit("callback", resultArr);
      } else {
        this.$emit("callback", data);
      }
    },
    deleteSelect(code) {
      this.$refs.eagleDialogPage.deleteSelect(code);
    },
    radioClick(item) {
      let resultRadio = Object.assign({ code: "", name: "" }, item);
      resultRadio.code = item.AreaCode;
      resultRadio.name = item.AreaName;
      this.$emit("callback", resultRadio);
      this.$emit("update:show", false);
    },

    cellClick(item){
      if(!this.multi){
        this.radioClick(item);
      }
    }
  },
};
</script>